<template>
  <div class= "porpup" v-show="porpFn">
      <div class="po-head">
          <div class="po-head-fl">
                  <div class="back" @click = "close"><i class="icon iconfont icon-fangxiang"></i></div>
          </div>
          <div class="po-head-fr">
              <input type="text" name="sousuo" placeholder="搜索想要的商品">
              <i class="icon iconfont icon-sousuo"></i>
          </div>
      </div>
      <div class = "div1">
          <div>热门搜索</div>
          <div @click="flag = !flag">{{list1[index1]}}<i class="icon iconfont icon-down"></i></div>
      </div>
      <div class = "div2">
          <ul>
              <li v-for = "(item,index) in data" @click="request1(index)">{{item}}</li>
          </ul>
      </div>
      <div class= "div3">
            <div v-for = "item in lists">
                  <img :src = "item.bizLogo">
                  <p>{{item.bizName}}</p>
                  <p>{{item.bizDescription}}</p>
            </div>
      </div>
      <div class="zhezhao" v-show="flag==false">
          <ul class="shoop">
                <li>
                    <p>选择附近商家</p>
                    <span @click="flag=!flag">取消</span>
                </li>
                <li v-for = "(item,index) in list1" @click="dian(index)" >
                    <p>{{item}}</p>
                    <span v-if = "index1==index" class="dui">√</span>
                </li>
          </ul>
      </div>
  </div>
</template>
<script>
    export default{
      //计算属性
      computed:{
          porpFn(){
            return this.$store.state.porpupStore;
          }
      },
      data(){
          return {
              lists:[],
              flag:true,
              flag1:true,
              list1:[],
              index1:0,
              shan:"",
              data:["面包","可乐","洗衣","除菌皂","洗发露","龙虾","粮油干货 厨房调味","鸡蛋","啤酒","卫生纸","葱","锅巴","蘑菇","酸牛奶"]
          }
      },
      methods:{
            close(){
                this.$store.commit("porpupFn")
            },
            dian(index){
                this.flag = !this.flag;
                this.index1 = index;
            },
            sou(index){
                this.shan = this.data[index];
            },
            request(){
                this.$http.get("./static/data/sousuo.json")
                .then(function(req){
                    console.log(req.body.data.venders["1-6"].stores)
                    for(var i in req.body.data.venders["1-6"].stores){
                        this.list1.push(req.body.data.venders["1-6"].stores[i].storeName)
                    }
                    this.lists = req.body.data.nearbyStores;
                    this.list1 = this.list1.slice(1,this.list1.length);
                })
            },
            request1(index){
              //  this.$store.state.shan = this.data[index]
                this.$store.commit("porpupFn1");
              //  console.log(this.$store.state.shan);
                this.$http.jsonp("https://gatewx.dmall.com/search/result?param=%7B%22keyword%22%3A%22"+this.data[index]+"%22%2C%22pairs%22%3A%221-10437%22%2C%22pageNum%22%3A%221%22%2C%22index%22%3A1%2C%22pageSize%22%3A20%7D&token=180DD99790479F6661A7631E63E851E6CCC1220E816FFA5BF9AAE4FEB0983621C91C4E4CDC646F0E4842C6B3BA2EC14BDD5E506DE86092704FFAAA8C5AEEA91DF37A33160A0D9ED37FB12AE98FDA9C3C755C9B6E9D2FD0DBAD0C148B0352D9E55EAD28AC247E0CC4E8B4716430A27F1AB433E93B693163937CB69F046970D15F&source=2&tempid=C7983DF1925000028B468A009BB0185A&pubParam=%7B%7D&_=1499776612193")
                .then(function(req){
                    console.log(req.body.data.list)
                    this.$store.state.shan = req.body.data.list;
                })
                //console.log(this.$store.state.porpupStore1)
            }
        },
        created(){
            this.request()
        }

    }
</script>
<style scoped>
.porpup{
position:absolute;
left:0;right:0;top:0;bottom:0;
background:#fff;
z-index:300;
}
.back{background-color:black;width:0.3rem;height:0.3rem;text-align:center;line-height:0.25rem;border-radius:50%;font-size:0.25rem;display:inline-block;}
.back i{color:#fff;}
.po-head .po-head-fr{width:85%;position:relative;text-align:center;}
.po-head{height:0.44rem;display:flex;background:#fff;align-items:center;width:100%;box-shadow:0 0 10px #ccc}
.po-head .po-head-fl{width:15%;text-align:center}
.po-head .po-head-fr input{height:0.26rem;outline:none;font-size:0.15rem;padding-left:0.25rem;width:88%;border:none;border:1px solid #ccc}
.po-head .po-head-fr i{position:absolute;font-size:0.2rem;color:#ccc;left:0.1rem;top:0.02rem}
.div1{display:flex;justify-content:space-between;margin:0 0.1rem;align-items:center;height:0.49rem;border-bottom:1px solid #ccc}
.div2 ul li {height:0.23rem;text-align:center;border:1px solid #ccc;padding:0 0.04rem;border-radius:0.12rem;margin:0.07rem 0.05rem;line-height:0.20rem}
.div2 ul{display:flex;align-items:center;flex-wrap:wrap;margin:0 0.2rem}
.div3{display:flex;align-items:center;flex-wrap:wrap;}
.div3 div{width:50%;text-align:center}
.div3 div img{width:0.4456rem;}
.zhezhao{position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);right:0;bottom:0}
.shoop{background:white;margin-top:130%;height:30%;width:100%;padding-top:0.1rem}
.shoop li{display:flex;align-items:center;justify-content:space-between;margin:0.1rem 0.14rem;font-size:0.16rem}
.dui{color:#fd7c48}
</style>
